<template>
	<view class="archives">
		<!-- 猫咪档案列表 -->
		<view class="archives-list">
			<view class="archives-item">
				<view class="archives-item-top">
					<image class="archives-item-headimg" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
					<view class="archives-item-content">
						<view class="archives-content-name">八月</view>
						<view class="archives-content-info">
							<text>妹妹</text>
							<text>1岁0个月</text>
							<text>布偶</text>
						</view>
					</view>
					<view class="archives-item-right">
						<icon class="icon-BIANJI" @click="addCatArchives"></icon>
						<text @click="delArchivesItem">删除</text>
					</view>
				</view>
				<view class="archives-item-bottom">
					<icon class="icon-TISHI"></icon>
					<text>温馨提示：预计还有1周要去驱虫</text>
				</view>
			</view>
			<view class="archives-item">
				<view class="archives-item-top">
					<image class="archives-item-headimg" src="https://nabercat.oss-cn-hangzhou.aliyuncs.com/15456303108155.jpeg" mode="aspectFill"></image>
					<view class="archives-item-content">
						<view class="archives-content-name">八月</view>
						<view class="archives-content-info">
							<text>妹妹</text>
							<text>1岁0个月</text>
							<text>布偶</text>
						</view>
					</view>
					<view class="archives-item-right">
						<icon class="icon-BIANJI" @click="addCatArchives"></icon>
						<text @click="delArchivesItem">删除</text>
					</view>
				</view>
				<view class="archives-item-bottom">
					<icon class="icon-TISHI"></icon>
					<text>温馨提示：预计还有1周要去驱虫</text>
				</view>
			</view>
		</view>
		<!-- 添加猫咪档案按钮 -->
		<button class="add-cat-btn" @click="addCatArchives">
			<icon class="icon-TIANJIA"></icon>
			<text>添加猫咪档案</text>
		</button>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		// 删除列表数据
		delArchivesItem() {
			uni.showModal({
				title: '提示',
				content: '确定要删除该条数据吗？',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
					}
				}
			});
		},
		// 添加编辑猫咪档案
		addCatArchives() {
			uni.navigateTo({
				url: `/pagesArchives/archivesInfo/archivesInfo`
			});
		}
	},
	onLoad(options) {}
};
</script>

<style scoped lang="scss">
.archives {
	padding: 40rpx 32rpx;
	.archives-list {
		margin-bottom: 40rpx;
		.archives-item {
			background: #ffffff;
			border-radius: 16rpx;
			border: 2rpx solid #f6f6f6;
			margin-bottom: 32rpx;
			&:nth-last-of-type(1) {
				margin-bottom: 0;
			}
			.archives-item-top {
				display: flex;
				align-items: center;
				padding: 40rpx 20rpx 20rpx 32rpx;
				.archives-item-headimg {
					width: 88rpx;
					height: 88rpx;
					border-radius: 6rpx;
					margin-right: 26rpx;
				}
				.archives-item-content {
					flex: 1;
					.archives-content-name {
						font-size: 32rpx;
						font-weight: 600;
						color: #333333;
						line-height: 44rpx;
						margin-bottom: 8rpx;
					}
					.archives-content-info {
						font-size: 28rpx;
						color: #999999;
						line-height: 40rpx;
						display: flex;
						& > text {
							margin-right: 20rpx;
						}
					}
				}
				.archives-item-right {
					font-size: 24rpx;
					color: #34d1a9;
					display: flex;
					align-items: center;
					.icon-BIANJI {
						width: 24rpx;
						height: 24rpx;
						background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-archives-bianji.png) no-repeat;
						background-size: cover;
						margin-right: 20rpx;
					}
					& > text {
						padding-left: 20rpx;
						position: relative;
						&::after {
							content: '';
							width: 2rpx;
							height: 16rpx;
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							left: 0;
							background: #979797;
						}
					}
				}
			}
			.archives-item-bottom {
				height: 56rpx;
				padding: 0 36rpx;
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #f7b500;
				background: rgba(247, 181, 0, 0.12);
				.icon-TISHI {
					width: 20rpx;
					height: 20rpx;
					background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-archives-tishi.png) no-repeat;
					background-size: cover;
					margin-right: 12rpx;
				}
			}
		}
	}
	.add-cat-btn {
		width: 100%;
		height: 80rpx;
		background: #34d1a9;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #f5faff;
		line-height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.icon-TIANJIA {
			width: 28rpx;
			height: 28rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/pet-hospital/icon-archives-tianjia.png) no-repeat;
			background-size: cover;
			margin-right: 20rpx;
		}
	}
}
</style>
